<!-- 组件方式引入header -->
@component('backend.index.frame')
    @slot('title')
        <title>{{$title}}</title>
    @endslot
    @slot('script')
        <!-- 页面自身js -->
        <script type="text/javascript" src="/static/js/{{$identity}}.js"></script>
        @endslot
        @endcomponent
        </head>
        <body class="hold-transition sidebar-mini layout-fixed">
        <div class="wrapper">
            <!--顶部栏目-->
        <?php require_once resource_path('views') . '/backend/index/navbar.blade.php'; ?>
        <!-- 组件方式,引入侧边栏 -->
            @component('backend.index.sidebar')
                @slot('identity'){{$identity}}@endslot
                @slot('sidebar'){{$sidebar}}@endslot
            @endcomponent
            <div class="content-wrapper" id="role_list">
                <div class="modal fade" id="modal-default">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <span class="text-left">创建角色</span>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="role_name">角色名称: </label>
                                    <input class="form-control" id="role_name" v-model="role_name">
                                </div>
                                <div class="form-group">
                                    <label for="note">角色备注: </label>
                                    <textarea class="form-control" id="note" v-model="note" rows="5" cols="50"></textarea>
                                </div>
                                <div class="form-group">
                                    <label>角色状态: </label>
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input" type="radio" id="add_status_1" name="add_status" value="1" v-model="add_status">
                                        <label for="add_status_1" class="custom-control-label">启用</label>
                                    </div>
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input" type="radio" id="add_status_2" name="add_status" value="2" v-model="add_status">
                                        <label for="add_status_2" class="custom-control-label">禁用</label>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <a href="javascript:;" id="confirmDelete" class="btn btn-primary btn-sm" @click="addRole">确认</a>
                                <a href="javascript:;" class="btn btn-danger btn-sm" data-dismiss="modal">取消</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 内容标题（页面标题） -->
                <section class="content-header">
                    <div class="container-fluid">
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <h1>角色</h1>
                            </div>
                            <div class="col-sm-6">
                                <ol class="breadcrumb float-sm-right">
                                    <li class="breadcrumb-item"><a href="#">主页</a></li>
                                    <li class="breadcrumb-item active">角色列表</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 主体内容 -->
                <section class="content">
                    <div class="col-md-12">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">角色成员</h3>
                            </div>
                            <input type="hidden" id="lcm_lingpai" value="{{csrf_token()}}">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="label control-label">状态:</label>
                                            <select class="form-control" v-model="status">
                                                <option value="-1">全部</option>
                                                <option value="1">启用</option>
                                                <option value="2">禁用</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="label control-label">角色名称:</label>
                                            <div class="input-group">
                                                <input type='text' class="form-control" v-model="keyword" />
                                                <button class="btn btn-primary btn-sm" @click="getDataList">搜索</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="offset-3 col-md-3">
                                        <div class="form-group float-right">
                                            <button type="button" class="btn btn-primary btn-sm" style="display: block" @click="showApplyDialog">新增权限</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 20px;">
                                    <div class="col-md-12">
                                        <table class="table table-bordered table-hover text-center">
                                            <thead>
                                                <tr>
                                                    <th class="text-center" style="width: 15%">角色名称</th>
                                                    <th class="text-center" style="width: 30%">备注</th>
                                                    <th class="text-center" style="width: 15%">成员数</th>
                                                    <th class="text-center" style="width: 15%">创建时间</th>
                                                    <th class="text-center" style="width: 25%">操作</th>
                                                </tr>
                                            </thead>
                                            <tbody v-if="datalist.length > 0">
                                                <tr v-for="(item, index) in datalist">
                                                    <td class="text-center" style="width: 15%">@{{ item['role_name'] }}</td>
                                                    <td class="text-center" style="width: 30%">@{{ item['note'] }}</td>
                                                    <td class="text-center" style="width: 15%">@{{ item['member_num'] }}</td>
                                                    <td class="text-center" style="width: 15%">@{{ item['createtime'] }}</td>
                                                    <td class="text-center" style="width: 25%">
                                                        <button type="button" class="btn btn-primary btn-sm" v-if="item.status != 1" @click="showApplyDialog(item.id)">开启</button>
                                                        <button type="button" class="btn btn-danger btn-sm" v-if="item.status == 1" @click="delGroupApply(item.id)">禁用</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <tbody v-else>
                                                <tr><td colspan="5" class="text-center">暂无数据</td></tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="card-footer">
                                @component('backend.index.pagination')
                                @endcomponent
                            </div>
                        </div>
                    </div>

                </section>
            </div>

            <!--底部栏目-->
            <?php require_once resource_path('views') . '/backend/index/footer.blade.php'; ?>
        </div>
        </body>
        </html>
